<template>
  <div class="goods">
      <el-button type="success" plain class="mr-10" @click="addProducts()">添加商品</el-button>
      <!-- 添加表格 -->
      <el-table
        :data="tableData"
		height="400"
        border
        style="width: 100%">
        <el-table-column fixed label="#" width="50" type="index" :index="filterIndex">
		</el-table-column>
        <el-table-column  prop="goods_name" label="商品名称" width="150"></el-table-column>
        <el-table-column prop="goods_price" label="商品价格" width="120"></el-table-column>
        <el-table-column prop="goods_weight" label="商品重量" width="120"></el-table-column>
        <el-table-column label="创建时间" width="160">
            <template v-slot:default="{row}">
				{{row.add_time|filterTime}}
			</template>
				</el-table-column>
        <el-table-column  label="更新时间" width="160">
			<template v-slot:default="{row}">
				{{row.upd_time|filterTime}}
			</template>
		</el-table-column>
			<el-table-column prop="goods_id" label="商品编码" width="120"></el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
			<template v-slot:default="{row}">
				<el-button @click="handleClick(row)" type="primary" size="small" plain icon="el-icon-edit"></el-button>
				<el-button type="danger" size="small" icon="el-icon-delete" plain></el-button>
          </template>
        </el-table-column>
    </el-table>
		<!-- 分页器 -->
		<el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[5, 10, 20, 25]"
      :page-size="5"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
	data() {
		return {
			Pnp:'',
			pagenum:1,
			pagesize:5,
			total:33,
			tableData: []
		}
	},
	created(){
		this.getgoodsList()
	},
	// computed: {
	// 	filterIndex(row){
	// 		console.log(555)
	// 	}
	// },
	methods:{
		// 获取商品列表信息
		getgoodsList(){
			this.$axios({
				method:'get',
				url:'goods',
				params:{
					Pnp:this.Pnp,
					pagenum:this.pagenum,
					pagesize:this.pagesize
				}
			}).then(res=>{
				this.tableData=res.data.data.goods;
				this.total=res.data.data.total;
			})
		},
		// 改变每页条数
		handleSizeChange(val) {
			this.pagesize=val;
			this.getgoodsList();
		},
		// 改变页数
        handleCurrentChange(val) {
			this.pagenum=val;
			this.getgoodsList();
		},
		// 编辑页面
		handleClick(row){
			console.log(row)
		},
		// 添加商品分类
		addProducts(){
			this.$router.push("/goods-add");
		},
		// 页码标签处理函数
		filterIndex(index){
			return index+1+this.pagesize*(this.pagenum-1)
		}
	}

}
</script>

<style lang="less" scoped>
    .goods{
        width: 100%;
        .mr-10{
            margin-bottom:10px;
        }
    }
</style>